<template>
  <div class="container">
    <!--标题部分-->
    <div class="title">
      <div class="title-left">
        <img src="../../public/static/img/菱形.png" alt="" />
        <!--          <svg t="1621838762952" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2430" width="30" height="30"><path d="M512 951.6c-20.1 0-39.4-8-53.7-22.2L94.6 565.7C65 536 65 488 94.6 458.3L458.3 94.6C488 65 536 65 565.7 94.6l363.7 363.7c14.2 14.2 22.2 33.5 22.2 53.7 0 20.1-8 39.4-22.2 53.7L565.7 929.4c-14.3 14.2-33.6 22.2-53.7 22.2zM255.6 512L512 768.4 768.4 512 512 255.6 255.6 512z" p-id="2431" fill="#18f0ea"></path></svg>-->
        <div class="title-Style">乡村治理</div>
      </div>
      <div class="title-right">详细数据</div>
    </div>
    <!--图表部分-->
    <div class="body">
      <div class="right-top">
        <div
          v-for="(item, index) in totalitem1"
          :key="index"
          class="total-container"
        >
          <div class="total-container-top">{{ item.number }}</div>
          <div class="total-container-foot">{{ item.type }}</div>
        </div>
        <div
          title="详情"
          @click="showCQMY"
          v-for="(item, index) in totalitem2"
          :key="index"
          class="total-container"
        >
          <div class="total-container-top">{{ item.number }}</div>
          <div class="total-container-foot">{{ item.type }}</div>
        </div>
      </div>
      <!--    组件中间饼状图部分-->
      <div class="right-bottom">
        <div id="myChart"></div>
        <div class="bottom-item">
          <div class="item-container" v-for="item in rightData" :key="item.key">
            <div class="item-left" @click="rightOnclick(item.item)">
              {{ item.item }}
            </div>
            <!-- <div class="item-right">详情</div> -->
          </div>
        </div>
      </div>
    </div>

    <!-- 弹出框 村情民意 -->
    <div class="CQMY-root" v-show="CQMYVisible">
      <div class="CQMY-left-top">
        <span class="span1">村情民意</span>
        <span class="span2">
          <font color="#FFFFFF">2020事件总数：</font>
          <font color="#E1E600">70</font>
        </span>
        <span class="span3">
          <font color="#E1E600">35件</font>
          <font color="#E1E600">35件</font>
          <font color="#E1E600">50%</font>
        </span>
        <span class="span4">
          <font color="#F2F2F2">待办事件</font>
          <font color="#F2F2F2">办结时间</font>
          <font color="#F2F2F2">事件办结率</font>
        </span>
      </div>
      <div class="CQMY-left-bottom">
        <span class="span1">2020事件分析</span>
        <div v-for="item in progressData" :key="item.label" class="span2">
          <font class="inline">{{ item.label }}</font>
          <div class="progress">
            <el-progress
              :percentage="item.value"
              stroke-width="10"
            ></el-progress>
          </div>
        </div>
      </div>
      <div class="CQMY-right">
        <!-- <span class="span1">2020年事件清单</span> -->
        <span class="span1" @click="imgShow = !imgShow">
          <img
            src="../assets/img/2020年事件清单.png"
            width="100%"
            height="100%"
          />
        </span>
      </div>
    </div>
    <div class="imgDig" v-show="imgShow" @click="imgShow = false">
      <img src="../assets/img/事件清单详情.png" width="100%" height="100%" />
    </div>

    <!-- 弹出窗口 重大事件 -->
    <div v-if="ZDSJVisible">
      <ZDSJ />
    </div>
  </div>
</template>

<script>
import ZDSJ from "./dialog/ZDSJ.vue";
export default {
  name: "right",
  components: {
    ZDSJ,
  },
  data() {
    return {
      CQMYVisible: false,
      imgShow: false,
      //重大事件弹窗
      ZDSJVisible: false,
      totalitem1: [
        {
          type: "流出人口",
          number: 70,
        },
        {
          type: "流入人口",
          number: 70,
        },
        {
          type: "旅客人数",
          number: 70,
        },
      ],
      totalitem2: [
        {
          type: "事件总数",
          number: "70件",
        },
        {
          type: "待办事件",
          number: "35件",
        },
        {
          type: "事件办结率",
          number: "50%",
        },
      ],
      rightData: [
        {
          key: 1,
          item: "党建活动",
        },
        {
          key: 2,
          item: "远程教育",
        },
        {
          key: 3,
          item: "智慧养老",
        },
        {
          key: 4,
          item: "村委组织",
        },
        {
          key: 5,
          item: "帮扶对象",
        },
        {
          key: 6,
          item: "重大事件",
        },
      ],
      //弹窗进度条数据
      progressData: [
        {
          label: "疫情防控",
          value: 10,
        },
        {
          label: "矛盾纠纷",
          value: 23,
        },
        {
          label: "村庄环境",
          value: 33,
        },
        {
          label: "村庄卫生",
          value: 13,
        },
        {
          label: "村务党务",
          value: 20,
        },
        {
          label: "其他事件",
          value: 10,
        },
      ],
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    showCQMY() {
      this.CQMYVisible = !this.CQMYVisible;
    },
    showZDSJ() {
      this.ZDSJVisible = !this.ZDSJVisible;
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "在村工作",
          left: "left",
          textStyle: {
            fontSize: 12,
            color: "#ffffff",
          },
        },
        series: [
          {
            type: "pie",
            radius: "70%",
            label: {
              show: false,
            },
            data: [
              {
                value: 1048,
                name: "1",
              },
              {
                value: 735,
                name: "2",
              },
              {
                value: 580,
                name: "3",
              },
            ],
          },
        ],
      });
    },
    rightOnclick(e) {
      console.log(e);
      if (e == "重大事件") {
        this.showZDSJ();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  // position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgba(165, 181, 199, 0.2);
  border: 1px solid;
  border: #3c3f41;
}

.title {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
}

.title-left {
  width: 55%;
  color: #ffffff;
  margin-left: 5px;
  background-color: rgba(42, 132, 165, 0.7);
  border-radius: 10px;
  display: flex;
  align-items: center;
  font-size: 18px;
}

.title-Style {
  margin-left: 8px;
}
.title-right {
  position: absolute;
  color: #ffffff;
  font-size: 13px;
  width: 30%;
  background-color: rgba(42, 132, 165, 0.7);
  border-radius: 5px;
  float: right;
  right: 1%;
  text-align: center;
}

.right-top {
  display: flex;
  flex-wrap: wrap;
  height: 50%;
  width: 100%;
  /*background-color: #0077aa;*/
}

.right-bottom {
  display: flex;
  height: 50%;
  width: 100%;
  /*background-color: #9a6e3a;*/
}

.total-container {
  height: 50%;
  width: 33.33%;
}
.total-container:hover {
  cursor: pointer;
}

.total-container-top {
  background-color: rgba(43, 43, 43, 0.45);
  color: rgb(152, 185, 94);
  text-align: center;
  height: 50%;
  width: 100%;
}

.total-container-foot {
  color: white;
  text-align: center;
  height: 50%;
  width: 100%;
}

#myChart {
  width: 120px;
  height: 120px;
}

.bottom-item {
  display: flex;
  flex-wrap: wrap;
  width: 180px;
  height: 100%;
}

.item-container {
  display: flex;
  width: 50%;
  height: 33.33%;
}

.item-left {
  background-color: rgba(0, 120, 215, 0.3);
  border-radius: 5px;
  color: white;
  font-size: 10px;
  text-align: center;
  line-height: 20px;
  width: 60%;
  height: 20px;
}
.item-left:hover {
  cursor: pointer;
}

.item-right {
  color: white;
  font-size: 10px;
  text-align: center;
  line-height: 20px;
  width: 40%;
  height: 20px;
}

.body {
  height: calc(100% - 40px);
  width: 95%;
  margin-left: 2.5%;
}

.CQMY-root {
  opacity: 0.7;
  position: fixed;
  top: 15vh;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin-left: auto;
  margin-right: auto;
  // left: 30vw;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: stretch;
  background-color: #080808;
  width: 57%;
  height: 500px;
  .CQMY-left-top {
    display: flex;
    width: 40%;
    height: 200px;
    border: #3e3e3e solid;
    background-color: #3e3e3e;
    color: #ffffff;
    margin-left: 20px;
    margin-top: 30px;
    flex-direction: column;
    // justify-content: center;
    .span1 {
      margin-top: 5px;
      text-align: center;
    }
    .span2 {
      margin-top: 20px;
      text-align: center;
    }
    .span3 {
      width: 70%;
      height: 50px;
      margin-top: 45px;
      margin-left: auto;
      margin-right: auto;
      padding-top: 15px;
      background-color: #080808;
      display: flex;
      justify-content: space-around;
    }
    .span4 {
      width: 70%;
      height: 50px;
      margin-left: auto;
      margin-right: auto;
      display: flex;
      justify-content: space-around;
    }
  }

  .CQMY-left-bottom {
    display: flex;
    width: 40%;
    height: 235px;
    border: #3e3e3e solid;
    background-color: #3e3e3e;
    color: #ffffff;
    margin-left: 20px;
    margin-top: 10px;
    flex-direction: column;
    .span1 {
      margin-top: 5px;
      text-align: center;
      margin-bottom: 20px;
    }
    .span2 {
      margin-left: 20px;
      margin-bottom: 5px;
      // display: flex;
      .inline {
        width: 20%;
        display: inline-block;
      }
      .progress {
        margin-left: 10px;
        display: inline-block;
        width: 75%;
      }
    }
  }

  .CQMY-right {
    display: flex;
    width: 50%;
    height: 450px;
    border: #3e3e3e solid;
    background-color: #3e3e3e;
    color: #ffffff;
    margin-top: 30px;
    flex-direction: column;
    overflow: auto;
    .span1 {
      text-align: center;
    }
  }
}

.imgDig {
  position: fixed;
  top: 15vh;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin-left: auto;
  margin-right: auto;
  // left: 30vw;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: stretch;
  width: 30%;
  height: 400px;
}
</style>


